<template>
  <div class="student-home">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          <div class="info-content">
            <p>学号：{{ studentInfo.studentId }}</p>
            <p>姓名：{{ studentInfo.name }}</p>
            <p>班级：{{ studentInfo.class }}</p>
            <p>学习资料数：{{ learningCount }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="exam-card">
          <template #header>
            <div class="card-header">
              <span>最近考试</span>
            </div>
          </template>
          <div class="exam-content">
            <el-empty v-if="recentExams.length === 0" description="暂无考试" />
            <div v-else>
              <div v-for="exam in recentExams" :key="exam.id" class="exam-item">
                <p>{{ exam.name }}</p>
                <p>时间：{{ exam.time }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="score-card">
          <template #header>
            <div class="card-header">
              <span>成绩统计</span>
            </div>
          </template>
          <div class="score-content">
            <el-empty v-if="scores.length === 0" description="暂无成绩" />
            <div v-else>
              <div v-for="score in scores" :key="score.id" class="score-item">
                <p>{{ score.examName }}：{{ score.score }}分</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="24">
        <el-card class="learning-card">
          <template #header>
            <div class="card-header">
              <span>学习资料</span>
            </div>
          </template>
          <div class="learning-content">
            <el-empty v-if="learningMaterials.length === 0" description="暂无学习资料" />
            <el-table v-else :data="learningMaterials" style="width: 100%">
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="type" label="类型" />
              <el-table-column prop="createTime" label="创建时间" />
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="handleViewMaterial(scope.row)">
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface StudentInfo {
  studentId: string
  name: string
  class: string
}

interface Exam {
  id: string
  name: string
  time: string
}

interface Score {
  id: string
  examName: string
  score: number
}

interface LearningMaterial {
  id: string
  title: string
  type: string
  content: string
  createTime: string
}

const studentInfo = ref<StudentInfo>({
  studentId: '',
  name: '',
  class: ''
})

const recentExams = ref<Exam[]>([])
const scores = ref<Score[]>([])
const learningMaterials = ref<LearningMaterial[]>([])
const learningCount = ref(0)

// 查看学习资料
const handleViewMaterial = (material: LearningMaterial) => {
  // TODO: 实现查看学习资料的功能
  console.log('查看资料:', material)
}

onMounted(() => {
  // 从localStorage或API获取数据
  const storedInfo = localStorage.getItem('studentInfo')
  if (storedInfo) {
    studentInfo.value = JSON.parse(storedInfo)
  }
  
  // TODO: 从API获取最近考试和成绩数据
  recentExams.value = [
    {
      id: '1',
      name: '期中考试',
      time: '2024-04-21'
    }
  ]

  scores.value = [
    {
      id: '1',
      examName: '期中考试',
      score: 85
    }
  ]

  // TODO: 从API获取学习资料数据
  learningMaterials.value = [
    {
      id: '1',
      title: '示例资料',
      type: '文档',
      content: '示例内容',
      createTime: '2024-04-21'
    }
  ]

  learningCount.value = learningMaterials.value.length
})
</script>

<style scoped>
.student-home {
  padding: 20px;
}

.info-card, .exam-card, .score-card, .learning-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-content, .exam-content, .score-content, .learning-content {
  padding: 10px 0;
}

.exam-item, .score-item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.mt-20 {
  margin-top: 20px;
}
</style> 